<template>
  <div id="scroll-board">
    <div class="sub-title2">{{ $t('danPinXiaoShouPaiHangBangTop5') }} TOP7</div>
    <div class="board">
      <dv-scroll-board :config="config" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'ScrollBoard',
  data() {
    return {
      config: {
        header: [
          this.$t('paiMing'),
          this.$t('mingCheng'),
          this.$t('xiaoShoueWanYuan'),
          this.$t('xiaoLiangBi'),
          this.$t('zhanBi'),
        ],
        data: [
          ['<span class="useIndex">1</span>', 'AIRMATE HU1118-2 Белый обогреватель', '854', '150', '20%'],
          ['<span class="useIndex">2</span>', 'Deli GA511 Черный уничтожитель бумаги', '750', '105', '16%'],
          ['<span class="useIndex">3</span>', 'TINECO CD2142-01 Красный фен', '710', '95', '10%'],
          ['<span class="useIndex">4</span>', 'dreame AHD7-RS Золотистый фен', '641', '74', '8%'],
          ['<span class="useIndex">5</span>', 'Черная сковорода вок 6-го поколения KGH-J28A', '412', '361', '4%'],
          ['<span class="useIndex">6</span>', 'BUYDEEM K203 розовый электрочайник 1,2 л', '248', '224', '3%'],
          ['<span class="useIndex">7</span>', 'AUX NSC-200-11A1 черный обогреватель', '145', '321', '3%'],
        ],
        // index: true,
        columnWidth: [80, 260],
        align: ['center', 'center', 'center', 'center', 'center', 'center'],
        rowNum: 5,
        headerBGC: 'transparent',
        // headerBGC: '#1981f6',
        headerHeight: 45,
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        // waitTime: 99999999,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
#scroll-board {
  padding: 0 14%;
  display: flex;
  flex-direction: column;
  height: 100%;
  .board {
    height: calc(100% - 50px);
  }
}
.sub-title2 {
  background-image: url('~@/assets/datav/title1.png');
  background-size: 100% 100%;
  height: 50px;
  padding-left: 11%;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: Source Han Sans;
  text-shadow: 0px 0px 9px #159aff, 0px 2px 4px rgba(0, 0, 0, 0.5);
}

::v-deep {
  .dv-scroll-board {
    .header {
      color: #159aff;
    }
    .rows .useIndex {
      background: rgba(255, 119, 52, 0.1);
      border: 1px solid #ff7734;
      color: #ff7734;

      height: 16px;
      padding: 0 10px;
    }
  }
}
</style>
